<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .inp{
            width: 300px;
        }
    </style>
</head>
<body>
<div id="arr" style="width: 600px;margin: auto">
    <el-menu
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1" @click="loginRegterinCompany"><a target="_blank">企业注册</a></el-menu-item>
        <el-menu-item><a target="_blank">用户注册</a></el-menu-item>
    </el-menu>
    <hr>
    <h3>用户注册</h3>
    <hr>
    <span>{{mgr}}</span>
    <el-form ref="from" :model="user" label-width="80px">
        <el-form-item label="用户名">
            <el-input class="inp" @blur="userRegin" v-model="user.userName"></el-input>
            <span>{{str}}</span>
        </el-form-item>
        <el-form-item label="密码">
            <el-input class="inp" type="password" v-model="user.passWord"></el-input>
            <span>{{str2}}</span>
        </el-form-item>
        <el-form-item label="确认密码">
            <el-input class="inp" @blur="userPasswordreginter" type="password" v-model="passWord2"></el-input>
            <span>{{str1}}</span>
        </el-form-item>
        <el-form-item label="真实姓名">
            <el-input class="inp" @blur="realNameRegin" v-model="user.realName"></el-input>
            <span>{{stra}}</span>
        </el-form-item>
        <el-form-item label="性别">
            <el-radio-group v-model="user.sex">
                <el-radio label="男" value="男"></el-radio>
                <el-radio label="女" valu="女"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="电话">
            <el-input class="inp" @blur="userTelRegin" v-model="user.userTel"></el-input>
            <span>{{strb}}</span>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即注册</el-button>
            <el-button @click="loginLog">取消</el-button>
        </el-form-item>
    </el-form>
</div>

</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el: '#arr',
        data() {
            return {
                user: {
                    userName: '',
                    passWord: '',
                    realName: '',
                    sex: '男',
                    userTel: '',
                },
                passWord2: '',
                str: '',
                str1: '',
                str2: '',
                stra: '',
                strb: '',
                mgr:''
            }
        },
        methods: {
            onSubmit() {
                if (this.user.userName!=''&&this.user.passWord!=''&&this.realName!=''&&this.sex!=''&&this.userTel!=''){
                    console.log('submit!');
                    this.userReqistern()
                }else {
                    this.mgr="输入值有误!"
                }
            },
            loginRegterinCompany() {
                location.href = "/registerin/register-company.html"
            },
            loginLog() {
                location.href = "/login.html"
            },
            userRegin() {
                if (this.user.userName != '') {
                    axios.get("/comuser/userName1/" + this.user.userName).then(value => {
                        this.str = value.data
                    });
                } else {
                    this.str = '该字段必须填写!'
                }
            },
            userPasswordreginter() {
                if (this.user.passWord != '') {
                    if (this.user.passWord == this.passWord2) {
                        this.str1 = "正常"
                    }else {
                        this.str1 = "前后密码不一致！"
                    }
                } else {
                    this.str2="该字段必须填写!"
                }
            },
            realNameRegin(){
                if (this.user.realName!=''){
                    this.stra="正常"
                }else {
                    this.stra="该字段必须填写!"
                }
            },
            userTelRegin(){
                if (this.user.userTel!=''){
                    this.strb="正常"
                }else {
                    this.strb="该字段必须填写!"
                }
            },
            userReqistern(){
                axios.post("/comuser/user",this.user).then(value => {
                    this.loginLog()
                })
            }
        }


    })
</script>


</html>